<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>myLove❤</title>
  <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
  <script src="https://www.layuicdn.com/layui/layui.js"></script>
  <script type="text/javascript" src="https://gitee.com/felixhpp/mypage/raw/master/js/canvas_bg.js"></script>
  <script>
    var baseURL = 'https://gitee.com/felixhpp/mypage/raw/master'
    var love1ImgUrl = baseURL + '/img/love1.jpg'
    $(function () {

      //开启弹框
      function opendiv() {
        layui.use('layer', function () {
          var layer = layui.layer;
          layer.open({
            type: 1,
            title: "2020倒计时",
            anim: 2,
            area: ['600px', '500px'],
            content: $(".newYear"),
            success: function (layero, index) {},
            yes: function () {}
          });
        })
      }

      var isOpen = 1;
      var setInterval2 = setInterval(function () {
        if (new Date().getTime() - new Date("2020/1/2 00:00:00").getTime() > 0) {
          isOpen = -1;
        }
        if (isOpen == 1) {
          isOpen = 0;
          opendiv();
        } else if (isOpen == -1) {
          return;
        }
        console.log((new Date("2020/1/1 00:00:00").getTime() - new Date().getTime()) / 1000)
        $(".endSeconds").html(Math.ceil((new Date("2020/1/1 00:00:00").getTime() - new Date().getTime()) /
          1000) + " 秒")
        if (new Date("2020/1/1 00:00:00").getTime() - new Date().getTime() <= 0) {
          $(".endTitle1").html("2020 年");
          $(".endSeconds").html("祝你事事如意");
          $(".endTitle2").show();
          $(".newYear").css("background-image", "url(img/gif011.gif)")

          $(".newYear").append(
            "<img src='" + love1ImgUrl +
            "' alt=\"loveImg\" style=\"height: 280px;border: 10px solid rgba(255,255,205,0.7);\" />"
          )
          clearInterval(setInterval2);
        }
      })

      var setInterval1 = setInterval(function () {
        let nTime = new Date();
        dateDiff(nTime, "2019/11/24 0:0:0");

      }, 1000)

      function dateDiff(nTime, sTime) {
        if (sTime == null || sTime == "") {
          sTime = "2019/11/24 0:0:0";
        }
        let day1 = new Date(sTime).getTime();
        let iDays = (nTime.getTime() - day1) / (1000 * 60 * 60 * 24); //天数
        let iHours = (nTime.getTime() - day1) / (1000 * 60 * 60); //小时数
        let iMinutes = (nTime.getTime() - day1) / (1000 * 60); //分钟数
        $("#sTime").html("开始时间: " + "2019-11-24 00:00:00");
        $("#nTime").html("当前时间: " + formartDate(nTime));
        $("#dDays").html("相爱天数: " + iDays.toFixed(13) + "天");
        $("#dHour").html("相爱小时: " + iHours.toFixed(10) + "小时");
        $("#dMinutes").html("相爱分钟: " + iMinutes.toFixed(8) + "分钟");
        // return iHours
      };

      /*格式化时间  */
      function formartDate(mTime) {
        var mYear = mTime.getFullYear();
        var mMonth = mTime.getMonth() + 1;
        var mDate = mTime.getDate();
        var mHours = mTime.getHours();
        var mMinutes = mTime.getMinutes();
        var mSeconds = mTime.getSeconds();
        if (mMinutes < 10) {
          mMinutes = "0" + mMinutes
        }
        if (mSeconds < 10) {
          mSeconds = "0" + mSeconds
        }
        return mYear + "-" + mMonth + "-" + mDate + "  " + mHours + ":" + mMinutes + ":" + mSeconds;
      }

      /* 音乐点击 */
      $(".musicBtn").on("click", function () {
        if ($(".audio1").get(0).paused) {
          $(".audio1").get(0).play();
          $(".musicBtn i").addClass("layui-anim-loop")
        } else {
          $(".audio1").get(0).pause();
          $(".musicBtn i").removeClass("layui-anim-loop")
        }

      })
    })
  </script>
  <style>
    * {
      cursor: pointer;
    }

    body {
      background-color: beige;
    }

    #div1 {
      text-align: center;
      position: relative;
      top: 55px;
    }

    .loveName {
      color: red;
      font-weight: bold;
      font-size: 55px;
      height: 120px;
    }

    .lTime {
      /* width: 35%; */
      margin: 0 auto;
      text-align: center;
      font-size: 30px;
      color: #0FCECE;
    }

    #author {
      position: absolute;
      left: 75%;
      top: 75%;
      text-align: center;
    }
  </style>
</head>

<body>
  <canvas id="c" style="position: absolute;z-index: -1;text-align: center;top: -20px;left: -20px;"></canvas>
  <div id="div1">
    <div class="loveName">小短腿❤傻孩子</div>
    <div id="loveTime" class="loveTime">
      <div id="sTime" class="lTime"></div><br />
      <div id="nTime" class="lTime"></div><br />
      <div id="dDays" class="lTime"></div><br />
      <div id="dHour" class="lTime"></div><br />
      <div id="dMinutes" class="lTime"></div><br />
    </div>
  </div>
  <button class="musicBtn  ">
    <i class="layui-icon layui-icon-headset layui-anim layui-anim-rotate layui-anim-loop"
      style="font-size: 28px;position: fixed;left: 51px;top: 100px;"></i>
  </button>
  <audio autoplay="autoplay" loop class="audio1">
    <source src="music/yuai.mp3" type="audio/mpeg">
  </audio>
  <div class="newYear" style="font-size: 30px;color: #0FCECE;text-align: center;display: none">
    <br />
    <h2 class="endTitle1">距离2020年还剩余：</h2>
    <br />
    <h1 style="font-size: 88px;color: aqua;" class="endSeconds">50秒</h1>
    <br />
    <h2 class="endTitle2" style="font-size: 88px;color: red;display: none;">❤❤</h2>
    <br />
  </div>
  <footer id="author">
    <p>@Athink</p>
    <p>今天天气不错</p>
  </footer>
</body>

</html>